<template>
	<view class="page page-employee">
		<view class="employee" v-if="list.length"  v-for="v in list" :key="v.member_id">
			<image class="logo" :src="v.certify.work_card" />
			<view class="right">
				<view text-sm>姓名：<span fw-600>{{ v.certify.employee_name }}</span></view>
				<view text-sm>职位：<span fw-600>{{ v.certify.position }}</span></view>
				<view text-sm>电话：<span fw-600>{{ v.mobile }}</span></view>
				<view text-sm>等级：<span fw-600>{{ v.level_name }}</span></view>
			</view>
		</view>
		<view v-else-if="!loading" flex items-center justify-center flex-col pt-100px color-gray>
			<view class="icon icon-nodata text-8xl"></view>
			<view pt-10px>暂无数据</view>
		</view>
	</view>
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loading = ref(false)
	const loadedAll = ref(false)
	const list = ref([])

	async function getList() {
		if(loadedAll.value) return
		loading.value = true
		const data = await api.employee({
				page_size: page_size.value,
				page_no: page_no.value,
			})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}
	getList()
	
</script>

<style lang="scss">
.page-employee {
	padding: 30upx;
	.employee {
		border-top: 1px solid #eee;
		padding-top: 20upx;
		margin-bottom: 20upx;
		display: flex;

		.logo {
			width: 86*4.5upx;		//86*4
			height: 54*4.5upx;		//54
		}
		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 30upx;
			box-sizing: border-box;
		}
	}

	
}

</style>
